import React, { useRef, useEffect, useState } from 'react'
import { NavLink, Route, Switch, Redirect } from 'react-router-dom'
import Header from '../components/Header'
import shangchuan from './work/Shangchuan'
import model from './work/Model'
import sucai from './work/Sucai'
import axios from 'axios';
import './Work.css'
import Threejs from './work/Threejs'
import CanvasBox from './work/CanvasBox'
const Work = () => {
    const canvasRef = useRef(null);
    useEffect(() => {
        const canvas = canvasRef.current;
    })
    const onOut = (e) => {
        e.currentTarget.parentNode.parentNode.firstChild.lastChild.className = 'hide'
        axios.get('http://192.168.72.166:8080/api/postUserDesignDatas').then(res => {
            const data = res.data.data;
            console.log(data)
        })
    }
    const onHide = (e) => {
        e.currentTarget.parentNode.parentNode.className = 'none';
    }
    const [smList, setsmList] = useState([]);
    let newlist = [];
    useEffect(() => {
        axios.get("http://192.168.72.166:8080/api/getUsers").then(res => {
            const datas = res.data.data;
            datas.forEach((item) => {
                if (item.user_name == localStorage.getItem('data')) {
                    newlist.push(item.user_id)
                }
            });
            setsmList(newlist)
        })
    }, [])
    return (
        <div>

            <Header />
            <div className='work'>
                <div className='w-1'>
                    <div className='w-1-1'>
                        <div className='w-1-1-1'>
                            <NavLink to="/work" exact activeClassName='click-active'><img src={require('../images/模型.png')} />
                                <p >模型</p></NavLink>
                        </div>
                        <div className='w-1-1-1'>
                            <NavLink to="/work/2D/sucai" activeClassName='click-active'><img src={require('../images/素材.png')} />
                                <p>素材</p></NavLink>
                        </div>
                        <div className='w-1-1-1'>
                            <NavLink to="/work/2D/shangchuan" activeClassName='click-active'><img src={require('../images/上传.png')} />
                                <p>上传</p></NavLink>
                        </div>
                    </div>
                    <Switch>
                        <Route path='/work/2D/sucai' component={sucai}></Route>
                        <Route path='/work/2D/shangchuan' component={shangchuan}></Route>
                        <Route path='/work' component={model}></Route>
                        <Redirect to='/work' />
                    </Switch>
                </div>
                <div className='w-2'>
                    <div >
                        <div className='w-2-1'>
                            <Switch>
                                <Route path='/work/2D'><div className='w-2-1-1'><CanvasBox /></div></Route>
                                <Route path='/work/2D/sucai'><div className='w-2-1-1'><CanvasBox /></div></Route>
                                <Route path='/work/2D/shangchuan'><div className='w-2-1-1'><CanvasBox /></div></Route>
                                <Route path='/work/3D' component={Threejs}></Route>
                                <Route path='/work/3D/sucai' component={Threejs}></Route>
                                <Route path='/work/3D/shangchaun' component={Threejs}></Route>
                                <Route path='/work' component={CanvasBox}></Route>
                                <Redirect to='/work' />
                            </Switch>
                        </div>
                        <div className='none'>
                            {/* <img src='http://192.168.72.166:8080/mtl.png' /> */}
                            <form action="http://192.168.72.166:8080/api/postUserDesignDatas"
                                method="post"
                                enctype="multipart/form-data" className='hides'>
                                <input type="hidden" name="user_id" value={smList[0]} />
                                <input type="hidden" name="design_image" value='mtl.png' />
                                <div><span>作品名称：</span><input type="text" name='design_name' /></div>
                                <div><span>作品简介：</span><input type="text" name='design_content' /></div>
                                <input type='submit' value='导出' onClick={onHide} className='hides-1' />
                            </form>
                        </div>

                    </div>
                    <div className='w-2-2'>
                        <button className='last' onClick={() => window.location.replace('/work/2D')}>2D</button>
                        <button className='last' onClick={() => window.location.replace('/work/3D')}>3D</button>
                        <button className='last' onClick={onOut}>导 出</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Work;
